<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>动漫分类-国产</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表 -->  
</head>  
<style>
    /* 样式表：styles.css */  
  
/* 清除默认的列表样式 */  
nav ul {  
    list-style-type: none;  
    padding: 0;  
    margin: 0;  
    overflow: hidden; /* 防止内容溢出容器 */  
    background-color: #333; /* 导航栏背景色 */  
}  
  
/* 导航栏中的链接 */  
nav ul li {  
    float: left; /* 让列表项浮动以水平排列 */  
}  
  
nav ul li a {  
    display: block; /* 将链接转换为块级元素以填充整个列表项空间 */  
    color: white; /* 链接文字颜色 */  
    text-align: center; /* 文字居中 */  
    padding: 50px 80px; /* 内边距 */  
    text-decoration: none; /* 去除下划线 */ 
    font-size: 40px; 
}  
  
/* 链接的鼠标悬停效果 */  
nav ul li a:hover {  
    background-color: #111; /* 鼠标悬停时的背景色 */  
}  
  
/* 头部区域 */  
header {  
    display: flex; /* 使用Flexbox布局 */  
    flex-direction: column; /* 垂直方向排列子元素 */  
    align-items: center; /* 子元素在交叉轴上居中（这里是水平居中） */  
    justify-content: space-between; /* 子元素在主轴上分布 */  
    padding: 20px; /* 内边距 */  
    background-color: #f2f2f2; /* 背景色 */  
}  
  
header h1 {  
    color: #333; /* 标题文字颜色 */  
    text-align: center; /* 标题文字居中 */  
    font-size: 80px;
}  
  
header p {  
    color: #666; /* 段落文字颜色 */  
    text-align: center; /* 段落文字居中 */  
    margin-bottom: 0; /* 底部外边距为0 */  
    font-size: 20px;
}  

.image-container {  
        display: flex;  
        flex-wrap: wrap; /* 允许图片换行显示 */  
        justify-content: space-between; /* 图片之间水平间距 */  
    }  

    .image-item {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        margin-bottom: 20px; /* 图片之间的垂直间距 */  
    }  
    .image-item h3 {  
        text-align: center; /* 标题居中 */  
        margin-top: 10px; /* 标题上方的间距 */  
    }  
/* 其他可能的样式，如响应式布局等 */  
/* ... */
</style>
<body>  

<!-- 头部区域 -->  
<header>  
    <nav>  
        <ul>  
            <li><a href="shouye.html">首页</a></li>  
            <li><a href="shouye.html#anime-list">动漫列表</a></li>  
            <li><a href="fenlei.html">分类</a></li>  
            <li><a href="gengxin.html">最近更新</a></li>  
            <li><a href="#">注册</a></li>  
            <li><a href="#">登录</a></li>  
            <li><a href="#">搜索</a></li>  
            <li><a href="#">浏览记录</a></li>  
            <li><a href="#news">新闻</a></li>  
            <li><a href="#contact">联系我们</a></li>  
        </ul>  
    </nav>  
</header>  
<h1>动漫分类-国产</h1>
<!-- 轮播图或横幅广告 -->  
<section id="banner">  
    <div class="image-container">  
        <div class="image-item"> 
          <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.ysmimNaqb4tMWADk-pDnFgHaEo?w=197&h=123&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
          <h3>葫芦兄弟</h3>
        </div>
        <div class="image-item"> 
          <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.iFQdpTYA9FC4hyHN4Q9dLgHaFc?w=197&h=145&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
          <h3>哪吒闹海</h3>
        </div>
        <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.JHOP4L6RhWNfDjALrFvmOAHaEm?w=197&h=123&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>一念永恒</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.qG5hl6RtealEe7yKtANVdAHaD_?w=197&h=106&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>虹猫蓝兔七侠传</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.y-9iUPJIyoZKEINFDvCQWQHaEo?w=197&h=123&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>黑猫警长</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.vaNpS3zwt8XSjmCQ5uDZRgHaEC?w=327&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>刺客伍六七</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.CNZ5Y_WPl4TGNHUhYl5NVwAAAA?w=282&h=159&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>少年歌行</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.yFFZCPiDZd6F54FcLKPWogHaEK?w=294&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>吞噬星空</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.MVR9gkqpQXxy78eRlmB54gHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>斗罗大陆</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.WJJ3zc59TyDk7kVWtWdCwAHaEF?w=197&h=108&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>星辰变</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.ZW3E_xNO_CwegU1pbwuyKQHaEK?w=289&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>画江湖之不良人</h3>
          </div>
          <div class="image-item"> 
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Ro2eqCt7zPktX1QqCPPQBgHaEK?w=333&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅">
            <h3>神印王座</h3>
          </div>
    </div>  
</section> 
  
  
</body>  
</html>